<template>
    <div v-if="pronunciationList != null && pronunciationList.length > 0"
        :style="{ 'display': 'flex', 'flex-direction': direction == 'horizon' ? 'row' : 'column',
            'justify-content':balance,'flex-wrap':'wrap'
         }">
        <span @click="playAudio(pronunciation, index)" v-for="(pronunciation, index) in pronunciationList"
            v-bind:key="index">
            <small style="font-size: 16px;">{{ pronunciation.region }}[{{ pronunciation.symbol }}]</small>
            <v-icon v-if="pronunciationStatusList[index].color != 'grey'&&showIcon" :color="pronunciationStatusList[index].color"
                size="small" icon="mdi-volume-high" style="cursor: pointer;"></v-icon> &nbsp;
        </span>
    </div>
</template>

<script>
import { isResourceExist } from '@/api/voice';

export default {
    props: {
        direction: {
            type: String,
            default: 'horizon'
        },
        balance:{
            type:String,
            default:'center'
        },
        showIcon:{type:Boolean,default:true},
        enableAudio:{type:Boolean,default:true},
        pronunciationProps: {
            default: []
        }
    },
    data() {
        return {
            pronunciationStatusList: [{}, {},{},{},{},{},{},{},{}],
            audio: null,
            audioUrl: null,
            isResourceCheck:false,
            pronunciationList:[]
        }
    },
    mounted() {
        this.pronunciationList=this.pronunciationProps
        this.isSymbolRescourceExist()
    },
    methods: {
        setResource(pronunciation){
            this.stop()
            this.pronunciationStatusList= [{}, {},{},{},{},{},{},{},{}]
            this.pronunciationList=pronunciation 
            this.isSymbolRescourceExist()
        },
        playAudio(pronunciation, index) {
            if(!this.enableAudio)return
            if(!this.isResourceCheck)this.isSymbolRescourceExist()
            if (this.pronunciationStatusList[index] == null || this.pronunciationStatusList[index].status != 200) return
            if (this.audio != null && pronunciation.resource == this.audioUrl) {
                this.audio.pause()
                this.pronunciationStatusList[index].color = 'black'
                this.audio = null
                return
            } else if (pronunciation.resource != this.audioUrl) {
                if (this.audio != null) this.audio.pause()
                this.pronunciationStatusList.forEach(item => item.color = 'black')
                this.audio = new Audio(pronunciation.resource)
                this.audio.loop = true
                this.audio.play()
                this.pronunciationStatusList[index].color = 'primary'
                this.audioUrl = pronunciation.resource
                return
            }
            this.audio = new Audio(pronunciation.resource)
            this.audio.loop = true
            this.audio.play()
            this.pronunciationStatusList[index].color = 'pirmary'
            this.audioUrl = pronunciation.resource
        },
        stop() {
            if (this.audio != null) {
                this.audio.pause()
                this.audio = null
            }
        },
        isSymbolRescourceExist() {
            if (this.pronunciationList == null || this.pronunciationList.length < 0) return
            let pronunciationList = this.pronunciationList
            for (let i = 0; i < pronunciationList.length; i++) {
                if (pronunciationList[i].resource == null || pronunciationList[i].resource == '') continue
                isResourceExist(pronunciationList[i].resource).then(resp => {
                    this.pronunciationStatusList[i] = { status: resp.status }
                    this.pronunciationStatusList[i].color = resp.status == 200 ? 'black' : 'grey'
                })
            }
            this.isResourceCheck=true
        },
    },
    unmounted() {
        this.stop()
    },
    destroyed() {
        this.stop()
    },
}
</script>

<style scoped></style>